<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <li slot="bread"><a href="#">我的购物车</a></li>
    </nav-bread>

    <div class="container">
      <div class="row" v-for="(item,index) in cartList">
        <div class="col-md-1">
          <input type="checkbox" v-if="item.checked=='1'" checked @click="editCart('check',item)">
          <input type="checkbox" v-else @click="editCart('check',item)">
        </div>
        <div class="col-md-2">
          <img class="product" :src="'/static/'+item.productImage" alt="">
        </div>
        <div class="col-md-2">
          <span>{{item.productName}}</span>
        </div>
        <div class="col-md-2">
          <span>价格:￥{{item.salePrice}}</span>
        </div>
        <div class="col-md-2">
          <input type="button" value="-" @click="editCart('minu',item)">
          <input class="num-input" v-model="item.productNum" type="text">
          <input type="button" value="+" @click="editCart('add',item)">
        </div>
        <div class="col-md-2">
          <span>小计:{{item.productNum * item.salePrice}}</span>
        </div>
        <div class="col-md-1">
          <button @click="delCartConfirm(item)">删除</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-1" @click="toggleCheckAll">
          <span>全选</span>
          <input type="checkbox" v-model="checkedAll">
        </div>
        <div class="col-md-2">
          <span>合计{{totalPrice}}</span>
        </div>
        <div class="col-md-1">
          <button type="button" @click="checkOut">提交</button>
        </div>
      </div>
    </div>
    <model :mdShow="modelConfirm" @close="closeeModel">
      <p slot="title">提示</p>
      <p slot="msg">确认要删除此条数据吗?</p>
      <div slot="btnGroup">
        <a class="btn default" @click="modelConfirm=false">取消</a>
        <a class="btn default" @click="delCart">确认</a>
      </div>
    </model>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import NavHeader from '@/components/Header'
  import NavFooter from '@/components/Footer'
  import NavBread from '@/components/Bread'
  import Model from '@/components/Model'
  import axios from 'axios'

  export default {
    name: "Cart",
    data() {
      return {
        cartList: [],
        modelConfirm: false,
        delItem: '',//商品id
      }
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Model
    },
    mounted() {
      this.init();
    },
    computed: {
      checkedAll:{
        get:function () {
          return this.checkedCount == this.cartList.length;
        },
        set:function () {

        }
      },
      checkedCount() {
        var i = 0;
        this.cartList.forEach(function (item) {
          if (item.checked == '1') i++
        })
        return i;
      },
      totalPrice(){
        var  money = 0;
        this.cartList.forEach(function (item) {
          if (item.checked == '1'){
            money+= parseInt(item.productNum ) * parseFloat(item.salePrice)
          }
        })
        return money
      }
    },
    methods: {
      init: function () {
        var self = this;
        axios.get("/users/cartList").then(function (res) {
          var res = res.data;
          self.cartList = res.result
        })
      },
      delCartConfirm(delItem) {
        this.delItem = delItem;
        this.modelConfirm = true
      },
      //删除
      delCart() {
        var self = this;
        axios.post("/users/cartDel", {
          productId: self.delItem.productId
        }).then(function (res) {
          var res = res.data;
          if (res.status == '0') {
            self.modelConfirm = false;
            self.init();
            self.$store.commit("updateCartCount", -self.delItem.productNum);
          }
        })
      },
      closeeModel() {
        this.modelConfirm = false
      },
      //数量加减
      editCart(flag, item) {
        var self = this;
        if (flag == 'add') {
          item.productNum++
        } else if (flag == 'minu') {
          if (item.productNum <= 1) {
            return
          }
          item.productNum--;
        } else {
          item.checked = item.checked == '1' ? '0' : "1";
          console.log(item.checked);
        }
        axios.post("/users/cartEdit", {
          productId: item.productId,
          productNum: item.productNum,
          checked: item.checked
        }).then(function (res) {
           var res = res.data;
           var num = 0;
           if(flag == 'add'){
              num = 1
           }else if(flag == 'minu'){
             num = -1
           }
          self.$store.commit("updateCartCount", num)
        })
      },
      //全选
      toggleCheckAll() {
        var that = this,flag = !this.checkedAll
        this.cartList.forEach(function (item) {
          item.checked = flag?'1':'0'
        })
        axios.post('/users/editCheckAll', {
          checkAll: flag
        }).then(function (res) {
          var res = res.data;
          if (res.status == '0') {
            console.log("update success");
          }
        })
      },
      checkOut:function () {
        if(this.checkedCount> 0 ){
           this.$router.push({
             path:'/address'
           })
        }
      }
    }

  }
</script>

<style scoped>
  .product {
    width: 100%;
    height: 100px;
    display: block;
  }

  .num-input {
    width: 50px;
  }
</style>
